CSS @supports reegel: põhjalik juhend funktsioonide tuvastamiseks

Veebiarenduse pidevalt arenevas maastikus võib brauseritevahelise ühilduvuse tagamine ja ühtlase kasutajakogemuse pakkumine olla märkimisväärne väljakutse. Erinevad brauserid toetavad erinevaid CSS-funktsioone ja universaalselt kättesaamatutele funktsioonidele tuginemine võib viia katkiste paigutuste ja pettunud kasutajateni. CSS-i reegel @supports pakub võimsat mehhanismi funktsioonide tuvastamiseks, võimaldades tingimuslikult rakendada CSS-stiile vastavalt sellele, kas kasutaja brauser toetab konkreetset funktsiooni.

Mis on CSS @supports reegel?

Reegel @supports on CSS-i tingimuslik reegel, mis võimaldab kontrollida, kas brauser toetab konkreetset CSS-funktsiooni. See toimib sisuliselt CSS-i if lausena, võimaldades kirjutada erinevaid stiile sõltuvalt konkreetse funktsiooni kättesaadavusest. See võimaldab progressiivset täiustamist, kus saate kasutada uuemaid CSS-funktsioone neid toetavates brauserites, pakkudes samal ajal tagavaralahendust vanematele brauseritele.

Erinevalt brauseri nuusutamisest (brauseri nime ja versiooni tuvastamisest), mida üldiselt ebasoovitavaks peetakse selle ebausaldusväärsuse ja hoolduskoormuse tõttu, keskendub @supports funktsioonide tuvastamisele. See tähendab, et te kontrollite, kas brauser tegelikult toetab konkreetset CSS-omadust või -väärtust, olenemata brauseri nimest või versioonist. See lähenemine on palju tugevam ja tulevikukindlam.

@supports reegli süntaks

Reegli @supports süntaks on lihtne:

            @supports (condition) {
  /* CSS rules to apply if the condition is true */
}

@supports not (condition) {
  /* CSS rules to apply if the condition is false */
}

            

              
                Copy
              
            
          

• @supports: Märksõna, mis alustab reeglit.
• (condition): Testitav tingimus. Tavaliselt on see CSS-i omaduse-väärtuse paar või keerulisem Boole'i avaldis.
• {}: Loogelised sulud ümbritsevad CSS-reegleid, mida rakendatakse, kui tingimus on täidetud.
• not: Valikuline märksõna, mis eitab tingimust. Selle ploki CSS-reegleid rakendatakse, kui tingimus *ei ole* täidetud.

@supports'i põhinäited

Vaatame mõned lihtsad näited, et illustreerida, kuidas reegel @supports töötab.

display: grid toe kontrollimine

CSS Grid Layout on võimas paigutussüsteem, kuid seda ei toeta kõik vanemad brauserid. Saate kasutada @supports, et pakkuda varupaigutust brauseritele, mis ruudustikku ei toeta.

            .container {
  display: flex; /* Fallback for older browsers */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid; /* Use Grid Layout in browsers that support it */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Selles näites kasutavad brauserid, mis display: grid ei toeta, paindkasti paigutust, samas kui seda toetavad brauserid kasutavad ruudustiku paigutust.

position: sticky toe kontrollimine

position: sticky võimaldab elemendil käituda nagu position: relative, kuni see saavutab määratud läve, mil hetkel see muutub position: fixed. See on kasulik kleepuvate päiste või külgribade loomiseks.

            .sticky-header {
  position: relative; /* Fallback for older browsers */
}

@supports (position: sticky) {
  .sticky-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
  }
}

            

              
                Copy
              
            
          

Siin on brauseritel, mis position: sticky ei toeta, lihtsalt suhteliselt paigutatud päis, samas kui toetavad brauserid saavad kleepuva päise efekti.

Märksõna not kasutamine

Märksõna not võimaldab rakendada stiile, kui funktsiooni *ei toetata*.

            .element {
  background-color: lightblue;
}

@supports not (backdrop-filter: blur(5px)) {
  .element {
    background-color: rgba(173, 216, 230, 0.8); /* Fallback for browsers that don't support backdrop-filter */
  }
}

            

              
                Copy
              
            
          

Sel juhul, kui brauser ei toeta omadust backdrop-filter, on elemendil hägusa tausta asemel poolläbipaistev helesinine taust.

Keerulised tingimused Boole'i operaatoritega

Reegel @supports võimaldab ka mitme tingimuse kombineerimist Boole'i operaatoritega: and, or.

Operaatori and kasutamine

Operaator and nõuab, et mõlemad tingimused oleksid stiilide rakendamiseks tõesed.

            @supports (display: flex) and (align-items: center) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

            

              
                Copy
              
            
          

See näide rakendab paindkasti stiile ainult siis, kui brauser toetab nii display: flex kui ka align-items: center.

Operaatori or kasutamine

Operaator or nõuab, et stiilide rakendamiseks oleks vähemalt üks tingimustest tõene.

            @supports ((-webkit-mask-image: url(mask.svg))) or ((mask-image: url(mask.svg))) {
  .masked-element {
    mask-image: url(mask.svg);
    -webkit-mask-image: url(mask.svg);
  }
}

            

              
                Copy
              
            
          

Siin rakendatakse stiile, kui brauser toetab kas eesliitega -webkit-mask-image või standardset mask-image omadust. See on kasulik tarnija eesliidete käsitlemiseks.

not kombineerimine Boole'i operaatoritega

Samuti saate keerulisemate tingimuste jaoks kombineerida not operaatoritega and ja or.

            @supports not ((transform-origin: 50% 50%) and (perspective: 500px)) {
  .element {
    /* Styles to apply if either transform-origin or perspective is not supported */
    /* This could be a fallback for 3D transforms in older browsers */
  }
}

            

              
                Copy
              
            
          

@supports'i praktilised rakendused

Reeglit @supports saab kasutada laias valikus stsenaariumides, et parandada kasutajakogemust ja tagada brauseritevaheline ühilduvus.

Tüpograafia täiustamine

Saate kasutada @supports, et rakendada täiustatud tüpograafia funktsioone nagu font-variant-numeric või text-shadow brauserites, mis neid toetavad.

            p {
  font-family: sans-serif;
}

@supports (font-variant-numeric: tabular-nums) {
  p {
    font-variant-numeric: tabular-nums;
  }
}

@supports (text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)) {
  h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
}

            

              
                Copy
              
            
          

Täiustatud paigutuste rakendamine

Nagu varem näha, on @supports suurepärane erinevate paigutussüsteemide käsitlemiseks. Saate seda kasutada paindkasti, ruudustikupaigutuse või isegi vanemate tehnikate, nagu ujumiste, vahetamiseks vastavalt brauseri toele.

            .container {
  float: left; /* Fallback for very old browsers */
  width: 100%;
}

@supports (display: flex) {
  .container {
    display: flex;
    justify-content: space-between;
  }
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Visuaalsete efektide rakendamine

Kaasaegseid CSS-funktsioone, nagu filter, backdrop-filter ja clip-path, saab kasutada vapustavate visuaalsete efektide loomiseks. Kasutage @supports, et tagada, et need efektid ei rikuks vanemates brauserites paigutust.

            .image {
  border-radius: 5px; /* Fallback */
}

@supports (clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)) {
  .image {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
}

@supports (backdrop-filter: blur(10px)) {
  .modal {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

Müüja eesliidete käsitlemine

Kuigi müüja eesliited muutuvad haruldasemaks, võivad need siiski olla olulised vanemate brauseriversioonidega tegelemisel. @supports aitab teil vajadusel rakendada eesliitega omadusi.

            .element {
  /* Standard property */
  user-select: none;

  /* Vendor prefixed properties with feature detection */
  @supports not (user-select: none) and (-webkit-user-select: none) {
    .element {
      -webkit-user-select: none; /* For older Safari */
    }
  }

  @supports not (user-select: none) and (-moz-user-select: none) {
    .element {
      -moz-user-select: none; /* For older Firefox */
    }
  }
}

            

              
                Copy
              
            
          

@supports'i kasutamise parimad tavad

Et reeglit @supports tõhusalt kasutada, kaaluge järgmisi parimaid tavasid:

• Eelistage progressiivset täiustamist: Alustage põhilise, funktsionaalse disainiga, mis töötab kõigis brauserites. Seejärel kasutage @supports, et lisada täiustusi kaasaegsetele brauseritele.
• Hoidke see lihtsana: Vältige liiga keerulisi tingimusi. Lihtsamad tingimused on kergemini mõistetavad ja hooldatavad.
• Testige põhjalikult: Testige oma veebisaiti erinevates brauserites, et veenduda, et tagavarastiilid töötavad õigesti ja täiustatud stiilid rakenduvad ootuspäraselt. Kasutage brauseri testimise tööriistu ja reaalseid seadmeid.
• Kasutage funktsioonipäringuid säästlikult: Kuigi @supports on võimas, võib liigne kasutamine viia liigse CSS-i koodini. Mõelge, kas funktsioon on tõeliselt oluline või lihtsalt meeldiv lisand.
• Kommenteerige oma koodi: Dokmenteerige selgelt, miks te kasutate @supports ja mida tagavarastiilid on mõeldud saavutama. See muudab teie koodi lihtsamini mõistetavaks ja hooldatavaks nii endale kui ka teistele.
• Vältige brauseri nuusutamist: Vältige kiusatust kasutada JavaScriptil põhinevat brauseri nuusutamist. @supports pakub usaldusväärsemat ja tulevikukindlamat lahendust funktsioonide tuvastamiseks.
• Kaaluge polüfille: Mõnede funktsioonide puhul võivad polüfillid (JavaScripti teegid, mis pakuvad vanemates brauserites puuduvat funktsionaalsust) olla parem valik kui @supports, eriti kui vajate järjepidevat kogemust kõigis brauserites. Kaaluge aga polüfilli eeliseid võrreldes selle jõudluse mõjuga.

@supports'i alternatiivid

Kuigi @supports on CSS-is funktsioonide tuvastamise peamine meetod, on olemas ka alternatiivseid lähenemisviise, mida kaaluda.

Modernizr

Modernizr on populaarne JavaScripti teek, mis tuvastab HTML5 ja CSS3 funktsioonide kättesaadavuse. See lisab klassid <html> elemendile vastavalt funktsioonitoele, võimaldades teil sihtida konkreetseid brausereid CSS-iga. Kuigi Modernizr on võimas, lisab see sõltuvuse JavaScriptist ja võib suurendada lehe laadimisaega.

JavaScripti funktsioonide tuvastamine

Saate kasutada ka JavaScripti, et tuvastada funktsioonitugi ja rakendada stiile dünaamiliselt. See lähenemine pakub rohkem paindlikkust, kuid võib olla keerulisem kui @supports või Modernizri kasutamine. Samuti võib see viia stiilita sisu välgatamiseni (FOUC), kui JavaScripti täitmine võtab liiga kaua aega.

Tingimuslikud kommentaarid (Internet Explorer'i jaoks)

Tingimuslikud kommentaarid on Microsofti-spetsiifiline tehnika Internet Exploreri versioonide sihtimiseks. Neid üldiselt ei soovitata, kuna need ei ole standardne CSS ja töötavad ainult IE-s. Siiski võivad need olla kasulikud harvadel juhtudel, kus peate tegelema konkreetsete IE vigade või piirangutega. Pidage meeles, et tingimuslikke kommentaare ei toetata IE10-s ja hilisemates versioonides.

            <!--[if lt IE 9]>
  <link rel="stylesheet" href="ie8-and-below.css">
<![endif]-->

            

              
                Copy
              
            
          

@supports'i piirangud

Vaatamata oma tugevustele on @supports-il mõned piirangud:

• Piiratud omaduste-väärtuste paaridega: Kõige tavalisem kasutusjuhtum on konkreetsete CSS-i omaduste-väärtuste paaride toe kontrollimine. Kuigi keerulised tingimused on võimalikud, võivad need muutuda ebakäsitsetavaks.
• Ei tuvasta osalist tuge: @supports saab ainult öelda, kas funktsioon on toetatud või mitte. See ei anna teavet toe taseme ega rakenduse piirangute kohta.
• Spetsiifilisuse kaalutlused: @supports plokkides rakendatud stiilidel on sama spetsiifilisus kui teistel CSS-reeglitel. Olge spetsiifilisusega arvestamisel ettevaatlik, kui tühistate stiile @supports sees.
• Ei ole toetatud väga vanades brauserites: Väga vanad brauserid (nt IE8 ja vanemad) ei toeta @supports. Nende brauserite jaoks peate kasutama alternatiivseid meetodeid, nagu tingimuslikud kommentaarid või polüfillid.

Järeldus

CSS-i reegel @supports on kaasaegse veebiarenduse oluline tööriist. See võimaldab teil kirjutada tugevamat ja kohandatavamat CSS-koodi, tagades, et teie veebisaidid pakuvad head kasutajakogemust laias valikus brauserites. Kasutades progressiivset täiustamist ja @supports strateegiliselt, saate ära kasutada uusimaid CSS-funktsioone, toetades samal ajal vanemaid brausereid ja pakkudes kõigile kasutajatele järjepidevat kogemust. Pidage meeles, et seadke prioriteediks funktsioonide tuvastamine brauseri nuusutamise ees, testige põhjalikult ja hoidke oma kood puhas ja hästi dokumenteeritud.

Kuna veeb areneb edasi, muutub selliste tehnikate nagu @supports valdamine üha olulisemaks kvaliteetsete, juurdepääsetavate ja tulevikukindlate veebisaitide loomisel, mis vastavad globaalsele publikule. Nii et võtke omaks funktsioonide tuvastamise võimsus ja looge veebikogemusi, mis on nii uuenduslikud kui ka usaldusväärsed.